<template>
  <div class="box">
    <p>猜你喜欢</p>
    <div class="box">
      <div class="item" v-for="(item, index) in dataList" :key="index">
        <div class="png">
          <img :src="item.tp" alt="" />
        </div>
        <div class="right_con">
          <div class="top">
            <p>{{ item.name }}</p>
            <p>{{ item.dizhi }}</p>
          </div>
          <div class="txt">
            <p>{{ item.price }}元 门市价:{{ item.menshijia }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dataList: [
        {
          tp: "http://p0.meituan.net/dealwatera/1ea3a22d9079abc4314b65f1a8ba407d7926.jpg",
          name: "蜜雪冰城",
          dizhi: "[多城市]招牌柠檬水",
          price: "12",
          menshijia: "￥100",
        },
        {
          tp: "http://p0.meituan.net/scpdeal/64efa0d371aecc4ed0121f967dbed04836956.jpg",
          name: "味多美蛋糕",
          dizhi: "[多城市]老婆饼（单粒装）",
          price: "1.2",
          menshijia: "￥1.0",
        },
        {
          tp: "http://p0.meituan.net/dealwatera/1ea3a22d9079abc4314b65f1a8ba407d7926.jpg",
          name: "蜜雪冰城",
          dizhi: "[多城市]招牌柠檬水",
          price: "12",
          menshijia: "￥100",
        },
        {
          tp: "http://p0.meituan.net/dealwatera/1ea3a22d9079abc4314b65f1a8ba407d7926.jpg",
          name: "蜜雪冰城",
          dizhi: "[多城市]招牌柠檬水",
          price: "12",
          menshijia: "￥100",
        },
      ],
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {},
};
</script>
<style scoped>
.box {
  background-color: #f6f7f8;
  margin-top: 20px;
}
img {
  width: 200px;
  height: 200px;
}
.item {
  display: flex;
  align-items: center;
  margin-top: 60px;
}
p {
  font-size: 20px;
}
.right_con{
  margin-bottom: 20px;
}
</style>